<template>
    <div>
        <el-carousel :interval="3000" type="card" height="500px" style="margin-top: 50px;">
            <el-carousel-item v-for="item in items" :key="item.id">
                <img :src="item.imageUrl" alt="" style="width: 100%; height: 100%;">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
export default {
    data(){
        return {
            items: [
                {
                    id:1,
                    imageUrl: 'https://dqxy.jlnku.edu.cn/images/yuantu1.jpg'
                
                },
                {
                    id:2,
                    imageUrl: 'https://dqxy.jlnku.edu.cn/images/0004.jpg'
                    
                },
                {
                    id:3,
                    imageUrl: 'https://dqxy.jlnku.edu.cn/images/0026.jpg',
                },{
                    id:4,
                    imageUrl: 'https://dqxy.jlnku.edu.cn/__local/7/3B/6B/F942739F88BB77391AB29EFB2E2_CF4C8D74_4A8D5.jpg',
                },{
                    id:5,
                    imageUrl: 'https://dqxy.jlnku.edu.cn/__local/5/43/C6/4745420A47E460E488CBBA9EEAD_173C3491_105CD4.png',
                }

            ]
        }
    }

}
</script>

<style>
.el-carousel__item h3 {
    color: #2f4d76;
    font-size: 20px;
    opacity: 1;
    line-height: 500px;
    margin: auto 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #626c79;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>